<!--
 * @Description: 请输入描述信息
 * @Version: 请输入版本号
 * @Autor: xuebao
 * @Date: 2021-12-02 19:34:17
 * @LastEditors: xuebao
 * @LastEditTime: 2021-12-02 20:29:32
-->
<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item prop="phone">
        <el-input placeholder="请输入手机号" v-model="ruleForm.phone">
          <i slot="prefix" class="el-icon-phone"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row :gutter="18">
          <el-col :span="16">
            <el-input placeholder="请输入验证码" v-model="ruleForm.code">
              <i slot="prefix" class="el-icon-tickets"></i>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button @click="sendCode" :disabled="disabled">{{
              btnText
            }}</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="phoneLogin">发送</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "PhoneLogin",
  props: {
    // 表单信息
    ruleForm: {
      type: Object,
      required: true,
    },
    // 倒计时
    countDown: {
      type: Number,
      default: 60,
    },
  },
  components: {},
  data() {
    // 自定义验证规则
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        // 验证手机号的规则
        let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          // 如果符合手机号的规则额，
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      disabled: false,
      time: 0,
      btnText: "发送验证码",
      rules: {
        phone: [{ validator: checkPhone, trigger: "change" }],
        code: [
          {
            required: true,
            message: "验证码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    sendCode() {
      // 手机号码必须输入为正确  这个方法第一个参数是prop=‘这个值’,第二个值是错误信息
      this.$refs.ruleForm.validateField("phone", (errorMessage) => {
        console.log(errorMessage);
        if (errorMessage) {
          this.$message.error(errorMessage);
        } else {
          // 进入到倒计时步骤
          // 1时间开始倒数
          // 2按钮进入禁用状态
          // 3如果倒计时结束，按钮恢复可用状态 文字按钮变成重新发送 把倒计时时间重置为传递进来的时间
          // 4倒计时过程中，按钮文字为多少s后重新发送
          let timer = setInterval(() => {
            this.time--;
            this.btnText = `${this.time}s后重新发送`;
            this.disabled = true;
            if (this.time === 0) {
              //   倒计时结束
              this.disabled = false; // 按钮恢复到可用状态
              this.btnText = "重新发送";
              this.time = this.countDown;
              clearInterval(timer); //清楚倒计时
            }
          }, 1000);
          this.$emit('send')
        }
      });
    },
    phoneLogin(){
        this.$refs.ruleForm.validate((valid)=>{
            if(valid){
                this.$emit('submit')
            }else{
                this.$emit('errorHandle')
            }
        })
    }
  },
  mounted() {
    this.time = this.countDown; //60  time就是60
  },
};
</script>

<style></style>
